<template>
    <div>
        <h3>门店列表</h3>
        门店名称:
        <input type="text" v-model="can.houseName" >
        服务范围:
        <select v-model="can.serverId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in xiala.list">{{ item.serverName }}</option>
        </select>
        <input type="button" value="查询" @click="show" class="btn btn-info">
        <input type="button" value="批量删除" @click="delAll()" class="btn btn-danger">
        <input type="button" value="批量启用" @click="updStateAll(1)" class="btn btn-info">
        <input type="button" value="批量禁用" @click="updState(0)" class="btn btn-danger">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                    <td>id</td>
                    <td>门店</td>
                    <td>地址</td>
                    <td>门店logo</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>状态</td>
                    <td>营业时间</td>
                
                    <td>操作</td>          
                </tr>

                <tr v-for="item in queryinfo.list">
                    <td><input type="checkbox" :value="item.id" v-model="ids" @change="checkone"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.houseName}}</td>
                    <td>{{item.addr}}</td>
                    <td>
                        <img :src="item.imgLogo" alt="" width="100" height="100">
                    </td>
                    <td>{{item.serverName}}</td>
                    <td>{{item.dianZhu}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.state?"启用":"禁用"}}</td>
                    <td>{{moment(item.beginTime).format("YYYY-MM-DD")}}-{{moment(item.endTime).format("YYYY-MM-DD")}}</td>
                    <td>
                        <input type="button" value="修改" @click="upd(item.id)" class="btn btn-info">
                    </td>
            
                </tr>
            </tbody>
           
        </table>
        <span>一共<b>{{queryinfo.totalPage  }}</b>页</span>
            <span>一共<b>{{ queryinfo.totalCount }}</b>条</span>
            <span>每页<b>{{can.pageSize  }}</b>条</span>
            <span>一共<b>{{ can.pageIndex }}</b>/<b>{{ queryinfo.totalPage }}</b>页</span>

            <input type="button" value="首页" class="btn btn-primary" @click="fente(1)">
            <input type="button" value="上一页" class="btn btn-primary" @click="fente(can.pageIndex-1)">

            <span v-for="item in queryinfo.totalPage" :key="item" @click="fente(item)">{{ item }}</span>
            <input type="button" value="下一页" class="btn btn-primary" @click="fente(can.pageIndex+1)">
            <input type="button" value="尾页" class="btn btn-primary" @click="fente(queryinfo.totalPage)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
import router from '@/router';
const Route=useRoute();
const Router=useRouter();
//钩子函数
onMounted(()=>{
    getlist()
    showServer()
})
//修改
const upd=(id:any)=>{
    router.push({
        path:'/houseUpd',
        query:{
            id:id,
        }
    })
}
//批量启用
const updStateAll=(state:any)=>{

    if(ids.value.length==0){
        alert("至少选择一项");
        return;
    }
    if(confirm("确认启用吗?")){
        axios({
        method:'put',
        url:'/api/House/UpdStateAll',
        params:{
            ids:ids.value.toString(),
            state:state,
        }
    })
    .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("启用成功");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
       else{
        alert("启用失败");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
//批量禁用
const updState=(state:any)=>{
    
    if(ids.value.length==0){
        alert("至少选择一项");
        return;
    }
    if(confirm("确认禁用吗?")){
        axios({
        method:'put',
        url:'/api/House/UpdStateAll',
        params:{
            ids:ids.value.toString(),
            state:state,
        }
    })
    .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("禁用成功");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
       else{
        alert("禁用失败");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
//批量删除
const delAll=()=>{
    
    if(ids.value.length==0){
        alert("至少选择一项");
        return;
    }
    if(confirm("确认删除吗?")){
        axios({
        method:'delete',
        url:'/api/House/DelHouse',
        params:{
            ids:ids.value.toString()
        }
    })
    .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("删除成功");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
       else{
        alert("删除失败");
        ids.value=[];
        checked.value=false;
        show();
        return;
       }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
//全选/全不选/反选
const checked=ref(false);
const ids=ref([]);
const checkAll=()=>{
    checked.value=!checked.value;
    if(checked.value==true)
    {
        ids.value=queryinfo.list.map((item:any)=>{
            return item.id;
        })
    }
    else{
        ids.value=[];
    }
}
const checkone=()=>{
    if(ids.value.length==queryinfo.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
//查询
const show=()=>{
    can.pageIndex=1;
    getlist()
}
//下拉框
const xiala:any=reactive({
    list:[]
})
const showServer=()=>{
    axios({
        method:'get',
        url:'/api/House/ShowServer'
    })
    .then(res=>{
        console.log(res);
        xiala.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//分页
const fente=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>queryinfo.totalPage){
        can.pageIndex=queryinfo.totalPage;
        return;
    }
    can.pageIndex=num;
    getlist();
}
//显示门店列表
const can=reactive({
    pageIndex:1,
    pageSize:2,
    houseName:'',
    serverId:'',
})

const queryinfo:any=reactive({
    list:[],
    totalCount:'',
    totalPage:'',
})
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/House/HouseShow',
        params:can,
    })
    .then(res=>{
        console.log(res);
        queryinfo.list=res.data.list
        queryinfo.totalCount=res.data.totalCount
        queryinfo.totalPage=res.data.totalPage
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>